<template>
  <div class="banner">
    <div class="banner-title">
      <h2>全景式ERP</h2>
      <h3>业财绩一体的数智化制造运营管理平台</h3>
      <h5>
        全景式展示企业运营状态<br />助力大中小企业实现数智化转型和高效运营
      </h5>
      <h5></h5>
      <div><span @click="show = true">开始体验</span></div>
    </div>
    <img :src="imgUrl + 'wisdom-erp-banner.png'" alt="" />
  </div>
  <div class="part">
    <div class="part-title">
      <div>行业痛点</div>
      <p>您的企业，是否面临如下挑战？</p>
    </div>
    <ul>
      <li v-for="(el, i) in arrData" :key="i">
        <img :src="el.img" alt="" />
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b">{{ a }}</p>
      </li>
    </ul>
    <div class="part-title">
      <div>解决方案</div>
      <p>钢结构产业数字化—钢结构全景式智慧ERP</p>
    </div>
  </div>
  <img
    style="
      margin: auto;
      width: 1231px;
      height: 478px;
      display: block;
      margin-bottom: 100px;
    "
    :src="`${imgUrl}erp-solve.png`"
    alt=""
  />
  <!-- <div
    class="part-problem"
    :style="`background: url(${imgUrl}erp-solve.png) no-repeat center center; background-size: cover;`"
  ></div> -->
  <div class="part typical-characteristic">
    <div class="part-title">
      <div>典型特征</div>
      <p>
        专注于打磨每一个业务场景单元的功能，真正实现全管理模块、全业务流程的覆盖
      </p>
      <typical-characteristic></typical-characteristic>
    </div>
  </div>
  <div>
    <div class="part-title" style="margin-top: 60px">
      <div>全景式ERP五大优势</div>
      <p>深耕钢结构制造领域，将长期的业务实践中积累的经验和方法融入系统</p>
    </div>
    <five-advantages :advantageDate="advantageDate" />
  </div>
  <access-services-dialog
    v-model="show"
    @close="show = !show"
    @handleConfirm="handleConfirm"
  />
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { arrData, brightSpotArray, advantageDate } from "./constants";
import AccessServicesDialog from "@/components/access-services-dialog/index.vue";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { imgUrl } from "@/utils/common";
import fiveAdvantages from "@/views/software-mall/dispatch-work-apply/major/components/five-advantages.vue";
import typicalCharacteristic from "../components/typical-characteristic.vue";
const pointData = ref(brightSpotArray[0].photosData);
/* 产品两点区域 */
const btn = ref(brightSpotArray[0].title);
const handleClickTab = (item) => {
  btn.value = item.title;
  pointData.value = item.photosData;
  console.log(item);
};
const show = ref(false);
const show1 = ref(false);
const handleConfirm = () => {
  show.value = false;
  show1.value = true;
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 53%;
    left: 35.5%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-align: left;
    h2 {
      font-weight: bold;
      font-size: 60px;
    }
    h3 {
      font-size: 42px;
      line-height: 49px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;
      &:last-nth-of-type(2) {
        margin-bottom: 20px;
      }
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div {
      margin-top: 67px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 12px 50px;
        background-color: #fff;
        color: #1678ff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
/* .part {
      height: 717px;
    } */
ul {
  display: flex;
  /* width: calc(100% - 640px); */
  width: 66.7%;
  margin: 20px auto 100px;
  justify-content: space-around;

  li {
    /* width: 250px; */
    /* background-color: #ebecf0; */

    img {
      width: 65px;
      height: 65px;
      margin-bottom: 16px;
    }
    div {
      font-size: 20px;
      line-height: 30px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
  }
}
.part-problem {
  height: 667px;
}
.btn-tabs {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.sim-button {
  text-align: center;

  cursor: pointer;
  padding: 8px 24px;
  background-color: #f4f4f4;
  border-radius: 3px;
  /* color: rgba(255, 255, 255, 1); */
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
}
.button2 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.button2:hover {
  background-color: #1678ff;
  color: #fff;
}
.button2 > span {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover > span {
  opacity: 0;
}
.button2::after {
  content: attr(data-text);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50px;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #fff;
}
.button2:hover::after {
  left: 0;
  opacity: 1;
}
.sim-button__active {
  background-color: #1678ff;
  color: #fff;
}
/* 产品两点tip */
/* .banner-tip {
      position: absolute;
    } */
:deep(.el-carousel__container) {
  height: 702px;
}
:deep(.el-carousel__indicators--outside button) {
  /* background-color: var(--el-carousel-indicator-out-color); */
  opacity: 1;
  background: #ebecf0;
  width: 90px;
  height: 6px;
  border-radius: 4px;
}
:deep(.el-carousel__indicator.is-active button) {
  background-color: #1678ff;
}
.part-title {
  margin-top: 100px;
}
.typical-characteristic {
  background-color: #f7f9ff;
  /* padding-top: 40px; */
  overflow: hidden;
  .part-title {
    margin-top: 40px;
  }
}
</style>
